<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="HandheldFriendly" content="true">
    <title>QUI Demo</title>


    <link rel="stylesheet" href="../../../../css/frozenui.css">
    <link rel="stylesheet" href="../../../css/style.css">


</head>

<body ontouchstart>
<section class="ui-container">

    <section id="vip">
        <h1 class="title">VIP ICON</h1>
        <div class="demo-item">
            <p class="demo-desc">qq等级图标</p>
            <div class="demo-block ui-whitespace">
                <span class="ui-icon-qqlevel ui-icon-qqlevel-none"></span>
                <span class="ui-icon-qqlevel ui-icon-qqlevel-king"></span>
                <span class="ui-icon-qqlevel ui-icon-qqlevel-sun"></span>
                <span class="ui-icon-qqlevel ui-icon-qqlevel-moon"></span>
                <span class="ui-icon-qqlevel ui-icon-qqlevel-star"></span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">鹅头图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-qq"></span>
                <span class="ui-icon-vip"></span>
                <span class="ui-icon-svip"></span>
                <span class="ui-icon-yearvip"></span>
                <span class="ui-icon-yearsvip"></span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期鹅头图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-qq-off"></span>
                <span class="ui-icon-vip-off"></span>
                <span class="ui-icon-svip-off"></span>
                <span class="ui-icon-yearvip-off"></span>
                <span class="ui-icon-yearsvip-off"></span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">会员等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip1.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip2.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip3.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip4.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip5.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip6.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip7.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip8.png)"></span>
            </span>
                文本对齐
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">会员等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s1.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s2.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s3.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s4.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s5.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s6.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s7.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/vip_s8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">年费会员等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip1.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip2.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip3.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip4.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip5.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip6.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip7.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">年费会员等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s1.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s2.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s3.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s4.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s5.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s6.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s7.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearvip_s8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">超会等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip1.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip2.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip3.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip4.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip5.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip6.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip7.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">超会等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s1.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s2.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s3.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s4.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s5.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s6.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s7.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/svip_s8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">年费超会等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip1.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip2.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip3.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip4.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip5.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip6.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip7.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">年费超会等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s1.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s2.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s3.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s4.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s5.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s6.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s7.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/yearsvip_s8.png)"></span>
            </span>
            </div>
        </div>
        <!-- <div class="demo-item">
            <p class="demo-desc">会员等级图标</p>
            <div class="demo-block">
                            测试文本
                <span class="ui-icon-mq">
                    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/mq_vip.png)"></span>
                </span>
                <span class="ui-icon-mq">
                    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/mq_yearvip.png)"></span>
                </span>
            </div>
        </div> -->
        <div class="demo-item">
            <p class="demo-desc">过期会员等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <!-- <span class="ui-icon-viplevel">
                    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip.png)"></span>
                </span> -->
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip1.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip2.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip3.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip4.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip5.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip6.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip7.png)"></span>
            </span>
                <span class="ui-icon-viplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期会员等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s1.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s2.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s3.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s4.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s5.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s6.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s7.png)"></span>
            </span>
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/vip_s8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期年费会员等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip1.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip2.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip3.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip4.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip5.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip6.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip7.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期年费会员等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s1.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s2.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s3.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s4.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s5.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s6.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s7.png)"></span>
            </span>
                <span class="ui-icon-yearviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearvip_s8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期超会等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip1.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip2.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip3.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip4.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip5.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip6.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip7.png)"></span>
            </span>
                <span class="ui-icon-sviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期超会等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-viplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s1.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s2.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s3.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s4.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s5.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s6.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s7.png)"></span>
            </span>
                <span class="ui-icon-sviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/svip_s8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期年费超会等级图标</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip1.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip2.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip3.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip4.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip5.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip6.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip7.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip8.png)"></span>
            </span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">过期年费超会等级铭牌</p>
            <div class="demo-block ui-whitespace">
                测试文本
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s1.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s2.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s3.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s4.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s5.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s6.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s7.png)"></span>
            </span>
                <span class="ui-icon-yearsviplevel-s">
                <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/yearsvip_s8.png)"></span>
            </span>
            </div>
        </div>
        <!-- <div class="demo-item">
            <p class="demo-desc">会员等级图标</p>
            <div class="demo-block">
                            测试文本
                <span class="ui-icon-mq">
                    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/mq_vip.png)"></span>
                </span>
                <span class="ui-icon-mq">
                    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/2.0.0/img/level/off/mq_yearvip.png)"></span>
                </span>
            </div>
        </div> -->
        <p class="demo-desc"></p>

    </section>

</section>

<script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
<script>
    var _mtac = {};
    (function () {
        var mta = document.createElement("script");
        mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.2";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500421336");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
</script>


<script src="../../../js/lib/zepto.min.js"></script>
<script src="../../../js/index.js"></script>


</body>
</html>
